<template>
	<view class="house_car_main" @click="tigerClick">
		<img :src="value.img || '/static/nothing_house.png'" />
		<view class="house_car_main_text">
			<view class="house_car_main_text_title">
				{{value.name}}
			</view>
			<view class="house_car_main_text_note">
				{{value.note || "-"}}
			</view>
			<view class="house_car_main_text_price">
				<view>
					进货:<text style="color: green;">{{neatFigure(value.on_goods)}}</text>
				</view>
				<view>
					出货:<text style="color: #ff67bd;">{{neatFigure(value.out_goods)}}</text>
				</view>
				<view>
					库存:<text style="color: blue;">{{neatFigure(value.sum)}}</text>
				</view>
			</view>
			<view class="house_car_main_text_rel_price">
				￥{{neatFigure(value.price)}}
			</view>
			<view class="house_car_main_text_season"
				:class="`house_car_main_text_season_${seasonClass[value.season - 1]}`">
				{{seasonBase[value.season - 1]}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		neatFigure
	} from "@/tools/number.js"
	export default {
		name: "HouseCar",
		props: ["value"],
		data() {
			return {
				seasonClass: ["spring", "summer", "fall", "winter", 'all'],
				seasonBase: ["春", "夏", "秋", "冬", "全"]
			}
		},
		methods: {
			tigerClick() {
				this.$emit("click", this.value)
			},
			tigerHosue(value) {
				this.$emit("buttonClick", value)
			},
			neatFigure
		}
	}
</script>

<style lang="scss">
	$spring:rgb(82, 187, 11);
	$summer:rgb(182, 26, 0);
	$fall:rgb(211, 137, 69);
	$winter:rgb(45, 68, 136);
	$all_season:rgb(140, 71, 43);

	.house_car_main {
		height: 520rpx;
		box-sizing: border-box;
		border: #747474 1px solid;

		&>img {
			width: 100%;
			height: 340rpx;
		}

		&_text {
			height: 500 - 340rpx;
			width: 100%;
			position: relative;
			padding: 0 10rpx;

			&_season {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				top: -330rpx;
				right: 30rpx;
				background-color: white;
				border-radius: 50%;
				text-align: center;
				line-height: 70rpx;
				border: 10rpx solid;
				font-weight: 700;

				&_spring {
					border-color: $spring;
					color: $spring;
				}

				&_summer {
					border-color: $summer;
					color: $summer;
				}

				&_fall {
					border-color: $fall;
					color: $fall;
				}

				&_al {
					border-color: $all_season;
					color: $all_season;
				}

				&_winter {
					border-color: $winter;
					color: $winter;
				}

			}

			&_title {
				font-size: 32rpx;
				width: 100%;
				line-height: 50rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: block;
			}

			&_price {
				display: flex;

				& text {
					font-weight: 700;
				}

				&>view {
					width: 33.33%;
					text-align: left;
					font-size: 27rpx;
				}
			}

			&_rel_price {
				font-size: 38rpx;
				font-weight: 700;
				color: red;
			}

			&_note {
				font-size: 26rpx;
				color: #747474;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: block;
				width: 100%;
			}
		}

	}
</style>
